{% extends 'base.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static '/css/styles.css'%}">
<link rel="stylesheet" href="{% static '/css/commons.css'%}">





{% endblock %}

{% block content %}
<!--<link rel="stylesheet" href="{% static '/css/index.css'%}">-->
<style>

body{
    padding: 0;
    margin: 0;
    font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333;
}
.ccontainer{
    width: 590px;
    margin: 0 auto;
    padding-top: 60px;
    position: relative;
    margin-top: -100px;

    background-color: bisque;

}
.ccontainer:after{
    content: '';
    display: block;
    clear:both;
}
.ccontainer>div{
    float: left;
}
.ccontainer .logo{
    width: 100%;
    height: 120px;
    margin: 0 auto 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 120px;
}
.ccontainer .input{
    position: relative;
    width: 100%;
    height: 47px;
    border-top: #ccc solid 1px;
    border-right: none;
    border-bottom: #ccc solid 1px;
    border-left: #ccc solid 1px;
    border-radius: 4px 0 0 4px;
}
.ccontainer .input>input{
    outline: none;
    border: none;
    padding: 0 80px 0 10px;
    margin: 0;
    height: 44px;
    width: 502px;
    color: #333;
    font-size: 16px;
    border-radius: 4px 0 0 4px;
}
.ccontainer .input>input::-webkit-input-placeholder{
    color:#999;
}
.ccontainer .input .picker{
<!--    width: 100%;-->
    padding-right: 47px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    line-height: 44px;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    text-align: right;
    background-image: url("./static/img/down.png");
    background-position: 50px center;
    background-repeat: no-repeat;
    user-select: none;
}
.ccontainer .input .picker-list{
    list-style: none;
    padding: 5px 0;
    width: 100px;
    position: absolute;
    right: 0;
    top: 50px;
    margin: 0;
    line-height: 26px;
    font-size: 12px;
    border-radius: 2px;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    background-color: #fff;
    display: none;
}
.ccontainer .input .picker-list>li{
    padding-left: 36px;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 16px auto;
}
.ccontainer .input .picker-list>li:hover{
    background-color: #ebf1f5;
    cursor: pointer;
}
.ccontainer .input .hot-list{
    padding: 10px 0;
    width: 100%;
    position: absolute;
    left: 0;
    top: 50px;
    margin: 0;
    line-height: 32px;
    font-size: 14px;
    border-radius: 2px;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    background-color: #fff;
    display: none;
}
.ccontainer .input .hot-list>a{
    display: block;
    color: #333;
    text-decoration: none;
    padding: 0 10px;
    overflow: hidden;
}
.ccontainer .input .hot-list>a:hover{
    background-color: #f3f3f3;
}
.ccontainer .input .hot-list>a>div{
    float: left;
}
.ccontainer .input .hot-list>a>div.number{
    text-align: center;
    width: 40px;
}
.ccontainer .search{
    width: 89px;
    height: 46px;
    background-color: #08f;
    background-image: url("./static/img/search.png");
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 4px 4px 0;
    cursor: pointer;


}
.pagination a{
padding:10px 20px;
}

table tr td{
        padding:10px 10px;
	}

</style>


 <form role="search" method="get" id="searchform" action="/searchform">
      {% csrf_token %}
     <div class="ccontainer">
    <div class="logo" style="background-image: url(static/img/猎聘LOGO.png)"></div>
         <div class="input">
         <input type="text" name="q" placeholder="请输入你要搜索的岗位名称" required>
      <button type="submit" value="搜索" style="width: 83px;
    height: 100%; "><span class="ion-ios-search-strong">搜索</span></button>
</div>
     </div>
    </form>
<br><br>
<!--展示数据-->
<div style="background-color: bisque;width:600px">
<table>

    <tr>
        <td>岗位名称</td>
        <td>薪水</td>
        <td>工作地点</td>
        <td>学历</td>
        <td>工作经验</td>
        <td>公司名称</td>

    </tr>
<!--    展示数据-->
    {% for j in post%}
    <tr>
        <td><a href="/dd/{{j.id}}"> {{j.p_name}}</a></td>
        <td>{{j.p_salary}}</td>
        <td>{{j.p_address}}</td>
        <td>{{j.p_edu}}</td>
        <td>{{j.p_time}}</td>
        <td>{{j.p_company}}</td>

    </tr>
    {% endfor %}
<!--查询后展示的列表-->
    {% for j in post_list%}
    <tr>
        <td><a href="/dd/{{j.id}}">{{j.p_name}}</a></td>
        <td>{{j.p_salary}}</td>
        <td>{{j.p_address}}</td>
        <td>{{j.p_edu}}</td>
        <td>{{j.p_time}}</td>
        <td>{{j.p_company}}</td>
    </tr>
    {% endfor %}
</table>

</div>
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">《首页</a>
            <a href="?page={{page_obj.previous_page_number}}">上一页</a>
        {% endif %}
        {% if page_obj.has_next %}
            <a href="?page={{page_obj.next_page_number}}">下一页</a>
            <a href="?page={{page_obj.paginator.num_pages}}">末页》</a>
        {% endif %}
        <span class="current">
            第{{page_obj.number}} 页/共{{page_obj.paginator.num_pages}}页
        </span>
    </span>
</div>

{% endblock %}




